<template>
  <div>
    <div class="top">
      <ul>
        <li>
          <span>登录</span>
          <span>|</span>
          <span>注册</span>
        </li>
        <li>
          <a href="#">我的订单</a>
        </li>
        <li>
          <a href="#">我的收藏</a>
        </li>
        <li>
          <a href="#">购物车</a>
        </li>
      </ul>
    </div>
    <header>
      <div class="head">
        <img src="img/logo.c8999c02.png" alt />
        <!-- <ul class="hair">
          <router-link to="/all"><li>
           首页
          </li></router-link>
          <router-link to="/shop"><li>
            全部商品
          </li></router-link>
          <router-link to="/my"><li>
            关于我们
          </li></router-link>
        </ul> -->
        <el-tabs v-model="activeName" >
    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理" ><router-link to="/shop"></router-link></el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  </el-tabs>
      </div>
    </header>
    <div class="conter">
        <router-view></router-view>
    </div>
    <div class="bottom">

    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            activeName: ''
        }
    }
};
</script>

<style>
.top {
  width: 100%;
  height: 50px;
  background: black;
  margin: 0 auto;
  margin-bottom: 20px;
}
.top ul {
  display: flex;
  padding-right: 200px;
  float: right;
  list-style: none;
}
.top ul li {
  padding-left: 10px;
}
span {
  background: black;
  color: white;
  border: 0px black solid;
}
a {
  text-decoration: none;
  color: aliceblue;
}
header {
  width: 100%;
  height: 60px;
  /* background: blueviolet; */
  margin-bottom: 20px; 
}
.head {
  width: 80%;
  height: 100%;
  margin: 0 auto;
  border: 1px solid red;
  display: flex;
}
.hair {
  list-style: none;
  display: flex;
}
.head .hair li {
  padding-left: 10px;
  color: blue;
}
.conter{
    width: 80%;
    /* height: 50px; */
    margin: 0 auto;
    background: pink;
    margin-bottom: 20px;
}
.bottom{
    width: 100%;
    margin: 0 auto;
    height: 200px;
    background: black;
}
</style>